<template>
	<div class="product-info">
			<transition 
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter"
			>
				<div class="ball" ref="ballActive" v-if="showBall"></div>
			</transition>
			<div class="mui-card product-images">
				<!-- <div class="mui-card-content">
					<div class="mui-card-content-inner"> -->
						<my-lunbo :images="productImages"></my-lunbo>
					<!-- </div>
				</div> -->
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{productInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="price" style="padding:5px;display:flex;justify-content:space-between;">
							<span>市场价：<i style="text-decoration:line-through;">{{productInfo.marketPrice}}</i></span>
							<span>销售价：<i style="font-size:20px;color:red;">￥{{productInfo.sellPrice}}</i></span>
						</div>
						<div style="padding:5px;">
							<span>购买数量</span>
							<div class="mui-numbox" data-numbox-min='1'>
								<button class="mui-btn mui-btn-numbox-minus" type="button" @click="operateNumber(-1)">-</button>
								<input id="test" class="mui-input-numbox" type="number" :value="productNumber" @input="productNumber = parseInt($event.target.value)"/>
								<button class="mui-btn mui-btn-numbox-plus" type="button" @click="operateNumber(1)">+</button>
							</div>
						</div>
						<div style="padding:5px;">
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="addToCar">加入购物车</mt-button>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{productInfo.goodsNo}}</p>
						<p>库存情况：{{productInfo.stockQuantity}}</p>
						<p>上架时间：{{productInfo.addTime}}</p>
					</div>
				</div>
				<div class="mui-card-footer" style="display:flex;flex-direction: column;">
					<mt-button type="primary" size="large" plain style="margin:5px 0;">图文介绍</mt-button>
					<mt-button @click.native="goToComment" type="danger" size="large" plain>商品评论</mt-button>
				</div>
			</div>
	</div>
</template>
<script>
import myLunbo from './commonComp/Lunbo.vue'
import mui from '../lib/mui/js/mui.min.js'
import Interface from '../interface.js'
export default {
	data(){
		return {
			id: this.$route.params.id,
			productImages:[],
			productInfo:{},
			productNumber:1,
			showBall:false
		}
	},
	created(){
		this.getProductInfo(this.id);
	},
	mounted(){
		mui('.mui-numbox').numbox().setOption('max',parseInt(this.productInfo.stockquantity));
	},
	methods:{
		getProductInfo(id){
			//获取轮播图图片
			this.axios.get(Interface.getthumimagesBaseUrl+id).then(result=>{
				if(result.data.status === true)
				{
					result.data.message.forEach(element => {
						element.url = element.src;
						delete element.url;
					});
					this.productImages = result.data.message;
					console.log(this.productImages)
				}
			}).catch(err=>{
				alert(err.message)
			});
			
			//获取商品详情
			this.axios.get(Interface.getgoodsinfoBaseUrl+id)
				.then(result=>{
					if(result.data.status === true)
					{
						this.productInfo = result.data.message[0];
					}
					else
					{
						alert('获取数据异常');
					}
				})
				.catch(err=>{
					alert(err.message);
				})
		},
		operateNumber(number){
			this.productNumber += number;
		},
		beforeEnter(el){
			el.style.transform = 'translate(0,0)';
		},
		enter(el,done){
			el.offsetWidth;
			//计算位移的值
			
			var transformX = document.getElementById('ball').getBoundingClientRect().left - this.$refs.ballActive.getBoundingClientRect().left;
			var transformY = document.getElementById('ball').getBoundingClientRect().top - this.$refs.ballActive.getBoundingClientRect().top;
			el.style.transform = `translate(${transformX}px,${transformY}px)`;
			el.style.transition = 'transform .5s ease';
			done();
		},
		afterEnter(el){
			this.showBall = false;
		},
		addToCar(){
			this.showBall = true;
			this.$store.commit('addToShopCar',{count:this.productNumber,productId:this.id});
			this.productNumber = 1;
		},
		goToComment(){
			this.$router.push('/comment/'+this.id);
		}
	},
	components:
		{myLunbo}
}
</script>
<style lang="less">
	.product-info{
		padding: 5px;
		.product-images{
			height: 200px;
		}
	}
	.product-images{
		text-align: center;
	}
	.product-images img{
		height: 100%;
	}
	.ball{
		width: 15px;
		height: 15px;
		position: absolute;
		left: 150px;
		top: 370px;
		border-radius: 50%;
		background-color: red;
		z-index: 99;
	}
</style>